<template>
    <div class="topic">
       <h1>热门话题</h1>
       <div class="topiccontent" v-for="(item,index) in title" :key="index">
            <p><span style="color: hsl(199, 93%, 64%);font-size: 0.32rem;">#</span> {{item}}</p>
       </div>
    </div>
</template>

<script>
import {reactive,toRefs,onMounted} from 'vue'
import axios from 'axios'
export default{
    setup(){
       const state=reactive({
           title:[]
       })
       onMounted(async()=>{
            let res=await axios.get('hotTopic.json').then(res=>res.data.hot);
            res.forEach(e => {
                state.title.push(e.title);
            });
       })
       return{
           ...toRefs(state)
       }
    }
}
</script>
<style>
.topic{
    width: 7.5rem;
    height: fit-content;
    margin-top: 0.2rem;
    padding: 0.15rem 0.28rem;
    border-radius: 0.2rem;
    background: rgba(200,200,200,0.3);
}
h1{
    font-weight: bold;
    font-size: 0.34rem;
}
.topiccontent p{
    margin-top: 0.2rem;
    font-size: 0.27rem;
    font-weight: bold;
}
</style>